<template>
  <!-- 登录页面 -->
  <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<script>
import { deviceMixin } from '@/store/device-mixin'

export default {
  name: 'UserLayout',
  mixins: [deviceMixin],
  mounted () {
    document.body.classList.add('userLayout')
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang="less" scoped>
// 居中
._centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
// 阴影
._shadow( @x:1px,@y:1px,@size:5px,@color:#888888 ){
  box-shadow: @x @y @size @color;
}

#userLayout.user-layout-wrapper {
    height: 100%;

    &.mobile {
      .container {
        .main {
          max-width: 368px;
          width: 98%;
        }
      }
    }
    // 登录页面
    .container {
      width: 100%;
      min-height: 100%;
      background: #f0f2f5 url(~@/assets/image/logobg.jpg) no-repeat 50%;
      // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
      background-size: 100%;
      padding: 110px 0 144px;
      position: relative;

      .main {
        min-width: 260px;
        width: 368px;
        padding: 10px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8);
        ._shadow(1px,1px,8px,#a52e2e);
        ._centered();
      }

    }
  }
</style>
